<template>
  <div class="container">
    <div class="m-title"><span class="icon"></span>批量认证结果查询</div>
    <el-form label-width="70px">
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <el-form-item label="批次号:">
              <el-input
                placeholder="请输入内容"
                v-model="formData.custManualNumbr"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <el-form-item label="客户编码:">
              <el-input
                placeholder="请输入内容"
                v-model="formData.custCode"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <el-form-item label="客户名称:">
              <el-input
                placeholder="请输入内容"
                v-model="formData.custName"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-form-item label="认证时间:">
              <el-date-picker
                v-model="dateValue"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
                :unlink-panels=true
              >
              </el-date-picker>
            </el-form-item></div
        ></el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="checkInfo"
            >查询</el-button
          >
          <el-button type="primary" size="small" @click="returnPage"
            >返回</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <DicTable
      ref="dictable"
      stripe
      border="full"
      align="center"
      :columnData="tableColumns"
      :tableData="tableData"
      :loading="tableLoading"
      :currentPage="parseInt(tablePage.pageIndex)"
      :pageSize="parseInt(tablePage.pageSize)"
      :totalResult="parseInt(tablePage.rowCount)"
      :pager="true"
      @on-page-change="handlePageChange"
      width="100%"
    >
    </DicTable>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import NoCompliantCust from "@/api/customer/NoCompliantCust";
export default {
  data() {
    return {
      dateValue: "", //查询范围
      formData: {
        custCode:'',
        custName:'',
        custManualNumbr:'',

      },
      tablePage: {
        pageIndex: 1,
        pageSize: 5,
        totalResult: 0,
      },
      tableLoading: false,
      tableColumns: [
        { type: "seq", title: "序号", width: 60 },
        {
          field: "custManualNumber",
          title: "批次号",
          width: 150,
          showOverflow: true,
        },
        {
          field: "custNumber",
          title: "客户编码",
          width: 150,
          showOverflow: true,
        },
        {
          field: "custName",
          title: "客户名称",
          width: 150,
          showOverflow: true,
        },
        {
          field: "certType",
          title: "证件类型",
          width: 280,
          showOverflow: true,
        },
        {
          field: "certNumber",
          title: "证件号码",
          width: 150,
          showOverflow: true,
        },
        {
          field: "realDate",
          title: "认证时间",
          showOverflow: true,
        },
        {
          field: "realStatus",
          title: "认证结果",
          width: 100,
          showOverflow: true,
        },
        {
          field: "realMsg",
          title: "认证描述",
          showOverflow: true,
        },
      ],
      tableData: [
      ],
    };
  },

  components: {
    DicTable,
  },

  computed: {},

  mounted() {
    this.getNonRealCustList()
  },

  methods: {
    async getNonRealCustList(){
      let parmas = {
        pageIndex:this.tablePage.pageIndex,
        pageSize:this.tablePage.pageSize,
        staffId:'4',
        custManualNumbr:this.formData.custManualNumbr,
        oldPartyCode:this.formData.custCode,
        custName:this.formData.custName,
        startDate:this.dateValue,
        endDate:this.dateValue
      }
      const response = await NoCompliantCust.getNonRealCustList(parmas);
      if(response.code == 200){
         this.tableData = response.meta.disputeList;
         this.tablePage.rowCount = response.meta.pageInfo.rowCount;
         this.tableData.forEach(item=>{
           item.realStatus = item.realStatus == 1 ? '通过':'未通过'
         })
      }
    },
    //改变页码
    handlePageChange(val) {
      this.tablePage.pageIndex = val.currentPage;
      this.tablePage.pageSize = val.pageSize;
      this.getNonRealCustList();
    },
    //查询
    checkInfo() {
      
    },
    returnPage() {
      this.$router.push({
        path: "/noCompliantCust",
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  padding: 0.2rem;
  height: 100%;
  background-color: #fff;
}
.m-title {
  margin-bottom: 20px;
  color: #0052d9;
  font-size: 12px;
}
.m-title .icon {
  float: left;
  display: block;
  width: 3px;
  height: 12px;
  background: #f56f3c;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 14px;
}
</style>